<!--<template>-->
<!--  <div class="mobile-container">-->
<!--    <div-->
<!--      ref="cardRef"-->
<!--      class="card-wrapper"-->
<!--      :class="{ hidden: cardIsOpen }"-->
<!--      @click="handleClick"-->
<!--      :style="{ height }"-->
<!--    >-->
<!--      <div class="card-content">-->
<!--        <div class="card-cover-image-wrapper">-->
<!--          <img :src="getImage" class="card-cover-image" />-->
<!--        </div>-->
<!--        <div class="card-text-content">-->
<!--          <div class="card-title">{{ limitText(getName, 10) }}</div>-->
<!--          <div class="card-description">{{ limitText(text, 20) }}</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="card-club-content">-->
<!--        {{ text }}-->
<!--      </div>-->
<!--    </div>-->
<!--    <div-->
<!--      ref="cardCloneRef"-->
<!--      class="card-wrapper clone"-->
<!--      :class="{ expand: cardIsOpen }"-->
<!--      @click="handleClick"-->
<!--    >-->
<!--      <div class="card-content">-->
<!--        <div class="card-cover-image-wrapper">-->
<!--          <img :src="getImage" class="card-cover-image" />-->
<!--        </div>-->
<!--        <div class="card-text-content">-->
<!--          <div class="card-title">{{ limitText(getName, 10) }}</div>-->
<!--          <div class="card-description">{{ limitText(text, 20) }}</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="card-club-content">-->
<!--        {{ text }}-->
<!--      </div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="apply_for_entrance">-->
<!--      <van-button @click="associationForm" color="#1c7fc1">报名入口</van-button>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script lang="ts">-->
<!--import { mapState } from "vuex";-->
<!--import { Ref, ref } from "vue";-->
<!--import { useStore } from 'vuex';-->
<!--import {useRouter} from "vue-router";-->
<!--import {IClubManage,IClub,SingletonState,ISingleton} from "../../../interface"-->
<!--export default {-->
<!--  props: {-->
<!--    societies: {-->
<!--      type: Object,-->
<!--      default: {},-->
<!--    },-->
<!--    height: {-->
<!--      type: String,-->
<!--      default: "260px",-->
<!--    },-->
<!--  },-->
<!--  setup() {-->
<!--    const router = useRouter();-->
<!--    const store = useStore();-->
<!--    const club_manage:IClubManage = store.state.club_manage;-->
<!--    const show = ref(false);-->
<!--    const text = ref(-->
<!--      "教育网主要镜像站 东北地区：大连东软信息学院（IPv4 & IPv6）、大连理工大学（IPv4 & IPv6）、哈尔滨工业大学（IPv4 & IPv6） 华北地区：清华大学（IPv4 & IPv6, IPv4, IPv6）、北京理工大学（IPv4 & IPv6）、北京交通大学（IPv4 & IPv6）、北京外国语大学（IPv4 & IPv6, IPv4, IPv6） 华东北地区：中国科学技术大学（IPv4 & IPv6, IPv4, IPv6）、南京大学（IPv4 & IPv6）、南京邮电大学（IPv4 & IPv6） 华中地区：华中科技大学（IPv4） 华东南地区：上海交通大学（IPv4 & IPv6, IPv6）、浙江大学（IPv4） 华南地区：暂无 西北地区：兰州大学（IPv4 & IPv6） 西南地区：重庆大学（IPv4）"-->
<!--    );-->
<!--    const displayLength = ref(70);-->
<!--    const id = ref(1);-->
<!--    const isAnime = ref(false);-->
<!--    const cardIsOpen = ref(false);-->
<!--    const cardRef = ref<HTMLDivElement | null>(null);-->
<!--    const cardCloneRef = ref<HTMLDivElement | null>(null);-->
<!--    function changeShow() {-->
<!--      show.value = !show.value;-->
<!--      displayLength.value = displayLength.value == -1 ? 100 : -1;-->
<!--    }-->
<!--    function limitText(text: string, len = 100) {-->
<!--      if (text.length <= len) {-->
<!--        return text;-->
<!--      }-->
<!--      return `${text.substr(0, len)}...`;-->
<!--    }-->
<!--    const { toExpand, toFold } = useCardAnime(cardRef, cardCloneRef, cardIsOpen);-->
<!--    async function handleClick() {-->
<!--      if (!cardIsOpen.value) {-->
<!--        toExpand();-->
<!--      } else {-->
<!--        toFold();-->
<!--      }-->
<!--    }-->
<!--    const associationForm = function (){-->
<!--      router.push({-->
<!--        path:'/form',-->
<!--        query:{-->
<!--          clubid:store.state.page,-->
<!--          type:'new',-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--    return {-->
<!--      show,-->
<!--      text,-->
<!--      displayLength,-->
<!--      id,-->
<!--      cardRef,-->
<!--      changeShow,-->
<!--      limitText,-->
<!--      toExpand,-->
<!--      toFold,-->
<!--      isAnime,-->
<!--      handleClick,-->
<!--      cardIsOpen,-->
<!--      cardCloneRef,-->
<!--      club_manage,-->
<!--      store,-->
<!--      associationForm,-->
<!--    };-->
<!--  },-->
<!--  computed: {-->
<!--    ...mapState(["page"]),-->
<!--    clubs:function (){-->
<!--      if((this as any).club_manage.init){-->
<!--        return (this as any).club_manage.clubs-->
<!--      }else{-->
<!--        (this as any).store.dispatch('initAllAssociation');-->
<!--      }-->
<!--    },-->
<!--    getName: function () {-->
<!--      const club_manage:IClubManage = (this as any).club_manage;-->
<!--      const club_state:number = (this as any).store.state.singleton.applyClubsManageState;-->
<!--      if( ! club_manage.init ){-->
<!--        (this as any).store.dispatch('initAllAssociation');-->
<!--      }-->
<!--      if(club_state == SingletonState.done){-->
<!--        return (this.clubs as any).filter((e: any) => e.id == this.page)[0].name;-->
<!--      }-->
<!--      return "null";-->

<!--    },-->
<!--    getImage: function () {-->
<!--      const club_manage:IClubManage = (this as any).club_manage;-->
<!--      const club_state:number = (this as any).store.state.singleton.applyClubsManageState;-->
<!--      if( ! club_manage.init ){-->
<!--        (this as any).store.dispatch('initAllAssociation');-->
<!--      }-->
<!--      if(club_state == SingletonState.done){-->
<!--        return  (this.clubs as any).filter((e: any) => e.id == this.page)[0].avatar;-->
<!--      }-->
<!--      return null;-->
<!--    },-->
<!--  },-->
<!--};-->

<!--function useCardAnime(-->
<!--  cardRef: Ref<HTMLDivElement | null>,-->
<!--  cardCloneRef: Ref<HTMLDivElement | null>,-->
<!--  cardOpen: Ref<boolean>-->
<!--) {-->
<!--  async function toExpand() {-->
<!--    if (!cardRef.value || !cardCloneRef.value) return false;-->
<!--    const { left, top, width, height } = cardRef.value.getBoundingClientRect();-->
<!--    const target = cardCloneRef.value;-->
<!--    target.style.left = `${left}px`;-->
<!--    target.style.top = `${top}px`;-->
<!--    target.style.width = `${width}px`;-->
<!--    target.style.height = `${height}px`;-->
<!--    target.style.opacity = "1";-->
<!--    target.style.transition = "none";-->
<!--    await new Promise((res) => setTimeout(res));-->
<!--    target.style.transition = "";-->
<!--    cardOpen.value = !cardOpen.value;-->
<!--    await new Promise((res) => setTimeout(res));-->
<!--    target.style.left = "";-->
<!--    target.style.top = "";-->
<!--    target.style.width = "";-->
<!--    target.style.height = "";-->
<!--  }-->
<!--  async function toFold() {-->
<!--    if (!cardRef.value || !cardCloneRef.value) return false;-->
<!--    const { left, top, width, height } = cardRef.value.getBoundingClientRect();-->
<!--    const target = cardCloneRef.value;-->
<!--    target.style.left = `${left}px`;-->
<!--    target.style.top = `${top}px`;-->
<!--    target.style.width = `${width}px`;-->
<!--    target.style.height = `${height}px`;-->
<!--    cardOpen.value = !cardOpen.value;-->
<!--    window.document.body.style.overflow = "hidden";-->
<!--    target.scrollTo({ top: 0, behavior: "smooth" });-->
<!--    window.addEventListener("transitionend", async function removeOpacity(e) {-->
<!--      if (e.target === target) {-->
<!--        await new Promise((res) => this.setTimeout(res, 100));-->
<!--        target.style.pointerEvents = "";-->
<!--        target.style.opacity = "";-->
<!--        target.style.transition = "none";-->
<!--        window.document.body.style.overflow = "";-->
<!--        await new Promise((res) => this.setTimeout(res, 30));-->
<!--        target.style.transition = "";-->
<!--        window.removeEventListener("transitionend", removeOpacity);-->
<!--      }-->
<!--    });-->
<!--  }-->
<!--  return {-->
<!--    toExpand,-->
<!--    toFold,-->
<!--  };-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.mobile-container {-->
<!--  width: 100%;-->
<!--}-->
<!--.card-wrapper {-->
<!--  width: 100%;-->
<!--  height: 220px;-->
<!--  border-radius: 19px;-->
<!--  overflow: hidden;-->
<!--  box-shadow: 0 7px 36px -12px rgba($color: #000000, $alpha: 0.8);-->
<!--  transition: 0.1s ease;-->
<!--  perspective: 1600px;-->
<!--  &:not(.expand):active {-->
<!--    transform: scale(0.9);-->
<!--  }-->

<!--  .card-content {-->
<!--    width: 100%;-->
<!--    height: 100%;-->
<!--    position: relative;-->
<!--    max-height: 100vw;-->
<!--    .card-cover-image-wrapper {-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      position: relative;-->
<!--      &::before {-->
<!--        content: "";-->
<!--        position: absolute;-->
<!--        top: 0;-->
<!--        left: 0;-->
<!--        width: 100%;-->
<!--        height: 100%;-->
<!--        background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));-->
<!--        transition: 0.3s;-->
<!--        pointer-events: none;-->
<!--      }-->
<!--      img {-->
<!--        width: 100%;-->
<!--        height: 100%;-->
<!--        display: block;-->
<!--        object-fit: cover;-->
<!--        object-position: center;-->
<!--      }-->
<!--    }-->
<!--    .card-text-content {-->
<!--      position: absolute;-->
<!--      bottom: 0;-->
<!--      color: rgba($color: #fff, $alpha: 0.8);-->
<!--      text-align: left;-->
<!--      padding-left: 20px;-->
<!--      padding-bottom: 10px;-->
<!--      .card-title {-->
<!--        font-size: 1.6rem;-->
<!--        font-weight: bold;-->
<!--        line-height: 1.3em;-->
<!--        letter-spacing: 0.15em;-->
<!--        text-shadow: 0 0 6px;-->
<!--      }-->
<!--      .card-description {-->
<!--        font-size: 16px;-->
<!--        color: rgba($color: #fff, $alpha: 0.7);-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  &.clone {-->
<!--    position: fixed;-->
<!--    opacity: 0;-->
<!--    pointer-events: none;-->
<!--    margin: 0;-->
<!--    transition: 0.4s ease-in-out;-->
<!--    z-index: 1000;-->
<!--  }-->
<!--  &.expand {-->
<!--    &.clone {-->
<!--      pointer-events: all;-->
<!--    }-->
<!--    opacity: 1;-->
<!--    position: fixed;-->
<!--    border-radius: 0;-->
<!--    top: 0;-->
<!--    margin: 0;-->
<!--    left: 0;-->
<!--    height: 100vh;-->
<!--    overflow: auto;-->
<!--    width: 100vw;-->
<!--    box-shadow: 0 7px 36px -12px rgba($color: #000000, $alpha: 0);-->
<!--    z-index: 1000;-->
<!--    .card-cover-image-wrapper {-->
<!--      &:before {-->
<!--        background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));-->
<!--      }-->
<!--    }-->
<!--    .card-club-content {-->
<!--      min-height: 100%;-->
<!--    }-->
<!--  }-->
<!--  &.hidden {-->
<!--    opacity: 0;-->
<!--    pointer-events: none;-->
<!--  }-->
<!--  .card-club-content {-->
<!--    background: rgb(245, 245, 245);-->
<!--    padding: 20px;-->
<!--    text-align: left;-->
<!--    color: #474747;-->
<!--  }-->
<!--  .apply_for_entrance{-->
<!--    position: fixed;-->
<!--    bottom: 30px;-->
<!--    left: 20px;-->
<!--  }-->
<!--}-->
<!--</style>-->
